<template>
   <div class="xigen">
        <img :src="arr" alt="" />
        <div class="lijian">
          <h1>{{text}}</h1>
          <p>完美日记&nbsp;|&nbsp;信封&nbsp;|&nbsp;礼盒<span class="iconfont icon-new"></span> <p/>
          <div class="jia" @click="fun()">到手价 ￥<span>549</span>起</div>
            
        </div>
      </div>
</template>

<script>
import getlink from "@/apis/getapi.js";
export default {
props:["text"],
data(){
  return{

    arr:""
  }
},
  mounted() {
    getlink("/data/list/lists").then((ok) => {
      console.log(ok.data.data);
      this.arr =ok.data.swiper[4];
    });
  },
 methods:{
   fun(){
       this.$router.push({path:"/shopping",query:{luyou:"完美日记 / 信封礼盒"}})
   }
 }

}
</script>

<style  scoped>
.xigen img {
  height: 4rem;
  width: 100%;
}
.lijian {
  padding-top: 0.2rem;
  height: 1.3rem;
  text-align: center;
  background-color: antiquewhite;
  margin-bottom: .3rem;
    margin: 0 auto;
}
.lijian p{
  width: 1.6rem;
  margin: 5px auto;
}
.jia {
  width: 1.45rem;
  height: 0.3rem;
  line-height: 0.3rem;
  background-color: rgb(185, 42, 42);
  margin: 0 auto;
  color: white;
}
.jia span {
  font-size: 20px;
  font-weight: 600;
}
.icon-new{
 color: rgb(185, 42, 42);
  font-size: 25px;
}
</style>